<template>
	<view class="box">
		<view class="searchBox">
			<view class="common">
				<view class="left-box">
					<image src="../../../static/jingjie/search.png"></image>
					<input type="text" placeholder-style="color:rgba(153,153,153,1);" v-model="searchText" placeholder="输入搜索内容"
					 @change="seachAll" />
					<image src="/static/jingjie/delete2.png" mode="" @tap="clearText"></image>
				</view>
				<view class="right-box" @tap="back">取消</view>
			</view>
		</view>
		<view class="big-box">
			<view class="">
				<view class="small-box" v-if="noHistory">
					<view class=" empty-box">
						<image class="empty-img" src="../../../static/jingjie/no.png"></image>
						<view class="tips-box">暂无历史搜索</view>
					</view>
				</view>
				<view class="" v-else>
					<view class="searchitem" v-for="(item1,index1) in historyList" :key="index1" @tap="seachThis(item1.id,item1.content)">
						<view class="item_left">
							<image src="/static/jingyou/tiem.png" mode=""></image>
							<view class="text-box">{{item1}}</view>
						</view>
						<image class="item_right" src="/static/jingjie/delete_h.png" mode=""></image>
					</view>
				</view>
			</view>

			<view class="" v-if="havechange==true">
				<view class="searchitem" v-for="(item,index) in searchList" :key="index" @tap="seachThis(item.id,item.content)">
					<view class="item_left">
						<image src="../../../static/jingjie/search.png" mode=""></image>
						<view class="text-box">{{item.content}}</view>
					</view>
					<image class="item_right" src="../../../static/jingjie/arrow.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				historyList: [],
				searchList: [],
				noHistory: null,
				searchText: '',
				havechange: false,
			};
		},
		onShow() {
			if (uni.getStorageSync('searchHistory') != undefined) {
				this.noHistory = false
				this.historyList = uni.getStorageSync('searchHistory')
			} else {
				this.noHistory = true
				this.historyList =[]
				// console.log(this.historyList)
			}
			console.log(this.historyList,'1')
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			clearText() {
				this.searchText = ''
			},
			seachAll() {
				this.havechange = true
				var me = this;
				var data = {
					queryString: this.searchText,
				}
				this.myAjaxNew({
					model: 'news',
					controllerName: 'curiosity',
					actionName: 'querySearch',
					data: data,
					successBack: function(res) {
						console.log(res)
						if (res.data.data != null && res.data.data.length != 0) {
							me.searchList = res.data.data;
							if (me.searchList.length > 10) {
								me.searchList.length = 10
							}
						}
					},
				})
			},
			seachThis(id, content) {
				// var obj={};
				// obj.content=content
				this.historyList.push(content)
				console.log(this.historyList)
				uni.setStorageSync('searchHistory', this.historyList)
				uni.navigateTo({
					url: '../moreCurious/moreCurious?id=' + id
				})

			}
		}
	}
</script>

<style scoped>
	.box {
		height: 100%;
	}

	.searchBox {
		width: 100%;
		height: 128upx;
		padding: 50upx 24upx;
		padding-top: 60upx;
		box-sizing: border-box;
	}

	.left-box {
		width: 590upx;
		height: 64upx;
		background: rgba(255, 255, 255, 1);
		border: 1upx solid rgba(230, 230, 230, 1);
		border-radius: 32upx;
		padding-left: 22upx;
		display: flex;
		align-items: center;
	}

	.right-box {
		color: rgba(70, 206, 207, 1);
		font-size: 32upx;
	}

	.left-box image {
		width: 28upx;
		height: 28upx;
	}

	.left-box input {
		padding-left: 10upx;
		color: rgba(51, 51, 51, 1);
		font-size: 28upx;
		width: 80%;
		margin-right: 30upx;
	}

	.big-box {
		width: 100%;
		height: 90.2%;
		background-color: white;
	}

	.small-box {
		display: flex;
		justify-content: center;
	}

	.empty-box {
		width: 554upx;
		height: 408upx;
		position: relative;
		top: 385upx;
	}

	.empty-img {
		width: 100%;
		height: 100%;
	}

	.tips-box {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 325upx;
		color: rgba(102, 102, 102, 1);
		font-size: 33upx;
		z-index: 222;
		text-align: center;
	}

	.searchitem {
		padding: 0 24upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1upx #E6E6E6 solid;
		width: 100%;
		height: 88upx;
		box-sizing: border-box;
		font-size: 32upx;
	}

	.searchitem image {
		width: 32upx;
		height: 32upx;
	}

	.item_left {
		display: flex;
		align-items: center;
	}

	.item_left image {
		margin-right: 20upx;
	}
</style>
